<template>
	<div>
    <van-sticky>
      <div class="navbar">
       <van-icon class="navcross" name="arrow-left" @click="goBack" />
       <span class="nav-title">严选商城</span>
      </div>
    </van-sticky>
		<van-tabs @click="ChangeCateGoryListData" v-model="active">
		  <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id"></van-tab>
		</van-tabs>
		<div class="title_desc">
		  <h2>{{ name }}</h2>
		  <p>{{ frontDesc }}</p>
		</div>
		<Product :goodsList="goodsList" />
    <BackTop/>
	</div>

</template>

<script>
import Product from "../components/Product.vue";
import BackTop from '../components/BackTop.vue'
import { GetCateGoryData, GetCateGoryList } from "../request/api";
export default {
  data() {
    return {
      brotherCategory: [],
      page: 1,
      size: 1000,
      currentCategory: {},
      goodsList: [],
      id: "",
      name: "",
      frontDesc: "",
      active: 0,
    };
  },
  methods: {
    ChangeCateGoryListData(title, name) {
      this.active = title;
      this.name = name;
      this.brotherCategory.forEach((item) => {
        if (item.name == name) {
          this.frontDesc = item.front_name;
          this.id = item.id.toString();
        }
      });
      this.GetCateGoryListData(this.id);
      // this.$router.push({
      //   path: "/channel",
      //   query: { id: this.id },
      // });
    },
    GetCateGoryListData(id) {
      GetCateGoryList({
        categoryId: id,
        page: this.page,
        size: this.size,
      }).then((res) => {
        if (res.errno == 0) {
          this.goodsList = res.data.goodsList;
        }
      });
    },
    async goBack() {
      await this.$router.push('/home')
    }
  },
  created() {
    GetCateGoryData({
      id: this.$route.query.id,
    }).then((res) => {
      let { brotherCategory, currentCategory } = res.data;
      this.brotherCategory = brotherCategory;
      this.currentCategory = currentCategory;
      this.id = currentCategory.id.toString();
      this.name = currentCategory.name;
      this.frontDesc = currentCategory.front_name;
      this.brotherCategory.forEach((item, index) => {
        if (this.$route.query.id == item.id) this.active = index;
      });
    });
    this.GetCateGoryListData(this.$route.query.id);
  },
  // 点击左上角后退时内容随着路由变化(未完成)
  // watch: {
  //   "$route.path"(newVal) {
  //     this.GetCateGoryListData(newVal.slice(9));
  //     this.brotherCategory.forEach((item, index) => {
  //       if (newVal.slice(9) == item.id) {
  //         this.active = index;
  //         this.name = item.name;
  //         this.frontDesc = item.front_desc;
  //       }
  //     });
  //   }
  // },
  components: {
    Product,
    BackTop
  },
};
</script>
 
<style lang = "less" scoped>
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: .45rem;
  line-height: .45rem;
}
.navcross {
  position: absolute;
  padding-left: .2rem;
  margin-top: .13rem;
  color: darkred;
  font-size: .2rem;
}
.nav-title {
  display: block;
  font-size: .18rem;
  text-align: center;
}


.title_desc {
  text-align: center;
  background: #fff;
  h2 {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  p {
    height: 30px;
    line-height: 30px;
    color: #666;
  }
}
</style>